<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item >首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>
    <!--用户列表  -->
    <el-table :data="tableData" style="width: 100%" stripe>
      <el-table-column align="center" prop="date" label="用户ID" width="180">
       <template slot-scope="scope"> {{ scope.row.u_id }} </template>
      </el-table-column>
      <el-table-column align="center" prop="date" label="用户姓名" width="180">
       <template slot-scope="scope"> {{ scope.row.u_name }} </template>
      </el-table-column>
      <el-table-column align="center" prop="name" label="用户密码" width="180">
       <template slot-scope="scope"> {{ scope.row.u_pwd }} </template>
      </el-table-column>
      <el-table-column align="center" prop="name" label="用户邮箱" width="180">
       <template slot-scope="scope"> {{ scope.row.u_email }} </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-row>
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              @click="$router.push(`/home/user-update/${scope.row.u_id}`)"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              @click="deleteUser(scope.row.u_id)"
            ></el-button>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
 <script>
export default {
  data() {
    return {
      tableData: null,
    };
  },
  methods: {
   // 加载用户信息
   loadUserList() {
    this.axios.get('/pet-user?page=1&pagesize=4').then((res)=>{
     console.log('加载用户列表',res);
     this.tableData = res.data.data
    })
   },
   // 删除事件
   deleteUser(u_id){
    this.$confirm("是否确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          this.axios.post("/pet-user/del", `u_id=${u_id}`).then((res) => {
            console.log("删除商家", res);
            if (res.data.code == 200) {
              this.loadUserList();
            }
          });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
   }
  },
  mounted () {
   this.loadUserList();
  },
};
</script>